* {
  margin: 0;
  padding: 0;
}
* #root {
  background: url(image/背景图.jpg) no-repeat center;
  background-size: cover;
}
* #root .child1 {
  width: 90px;
  height: 60px;
  background-color: #93b823;
  position: absolute;
  top: 48vh;
  border-radius: 5px;
  color: white;
  left: 3vw;
  animation: movediv1 8s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  -webkit-animation: movediv1 8s;
  -webkit-animation-timing-function: movediv1 8s;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
}
@keyframes movediv1 {
  0% {
    transform: rotate(0deg);
    background-color: #93b823;
    left: 3vw;
  }
  10% {
    background-color: #4fc193;
    transform: rotate(30deg);
    left: 3vw;
  }
  50% {
    background-color: #33c6d8;
    left: 95vw;
    transform: rotate(0deg);
  }
  100% {
    background-color: #93b823;
    transform: rotate(-720deg);
    left: 3vw;
  }
}
@-webkit-keyframes movediv1 {
  0% {
    transform: rotate(0deg);
    background-color: #93b823;
    left: 3vw;
  }
  10% {
    background-color: #4fc193;
    transform: rotate(30deg);
    left: 3vw;
  }
  50% {
    background-color: #33c6d8;
    left: 95vw;
    transform: rotate(0deg);
  }
  100% {
    background-color: #93b823;
    transform: rotate(-720deg);
    left: 3vw;
  }
}
* #root .child2 {
  height: 200px;
  width: 300px;
  background: url(image/美食图片.jpg) no-repeat center;
  background-size: cover;
  left: 3vw;
  position: absolute;
}
* #root .child2:hover {
  transform: scale(1.3);
}
* #root #box {
  position: relative;
  width: 100px;
  height: 100px;
  left: 48%;
  top: 46%;
  transform-style: preserve-3d;
  transform: rotateX(30deg) rotateY(30deg);
  animation: dorotate 10s;
  -webkit-animation: dorotate 5s linear infinite;
}
* #root #box .bc1 {
  border: 1px solid red;
  height: 100px;
  width: 100px;
  color: white;
  line-height: 100px;
  text-align: center;
  background-color: rgba(196, 28, 28, 0.1);
  transform: translateY(-50px) rotateX(-90deg);
  position: absolute;
}
* #root #box .bc2 {
  border: 1px solid red;
  height: 100px;
  width: 100px;
  color: white;
  line-height: 100px;
  text-align: center;
  background-color: rgba(196, 28, 28, 0.1);
  transform: translateY(50px) rotateX(90deg);
  position: absolute;
}
* #root #box .bc3 {
  border: 1px solid red;
  height: 100px;
  width: 100px;
  color: white;
  line-height: 100px;
  text-align: center;
  background-color: rgba(196, 28, 28, 0.1);
  transform: translateX(-50px) rotateY(90deg);
  position: absolute;
}
* #root #box .bc4 {
  border: 1px solid red;
  height: 100px;
  width: 100px;
  color: white;
  line-height: 100px;
  text-align: center;
  background-color: rgba(196, 28, 28, 0.1);
  transform: translateX(50px) rotateY(-90deg);
  position: absolute;
}
* #root #box .bc5 {
  border: 1px solid red;
  height: 100px;
  width: 100px;
  color: white;
  line-height: 100px;
  text-align: center;
  background-color: rgba(196, 28, 28, 0.1);
  transform: translateZ(-50px);
  position: absolute;
}
* #root #box .bc6 {
  border: 1px solid red;
  height: 100px;
  width: 100px;
  color: white;
  line-height: 100px;
  text-align: center;
  background-color: rgba(196, 28, 28, 0.1);
  transform: translateZ(50px) rotateX(180deg);
  position: absolute;
}
@keyframes dorotate {
  0% {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  10% {
    transform: rotateX(36deg) rotateY(36deg) rotateZ(36deg);
  }
  20% {
    transform: rotateX(72deg) rotateY(72deg) rotateZ(72deg);
  }
  30% {
    transform: rotateX(108deg) rotateY(108deg) rotateZ(108deg);
  }
  40% {
    transform: rotateX(144deg) rotateY(144deg) rotateZ(144deg);
  }
  50% {
    transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg);
  }
  60% {
    transform: rotateX(216deg) rotateY(216deg) rotateZ(216deg);
  }
  70% {
    transform: rotateX(252deg) rotateY(252deg) rotateZ(252deg);
  }
  80% {
    transform: rotateX(288deg) rotateY(288deg) rotateZ(288deg);
  }
  90% {
    transform: rotateX(324deg) rotateY(324deg) rotateZ(324deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
}
@-webkit-keyframes dorotate {
  0% {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  10% {
    transform: rotateX(36deg) rotateY(36deg) rotateZ(36deg);
  }
  20% {
    transform: rotateX(72deg) rotateY(72deg) rotateZ(72deg);
  }
  30% {
    transform: rotateX(108deg) rotateY(108deg) rotateZ(108deg);
  }
  40% {
    transform: rotateX(144deg) rotateY(144deg) rotateZ(144deg);
  }
  50% {
    transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg);
  }
  60% {
    transform: rotateX(216deg) rotateY(216deg) rotateZ(216deg);
  }
  70% {
    transform: rotateX(252deg) rotateY(252deg) rotateZ(252deg);
  }
  80% {
    transform: rotateX(288deg) rotateY(288deg) rotateZ(288deg);
  }
  90% {
    transform: rotateX(324deg) rotateY(324deg) rotateZ(324deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
}
